@import "../pcss/mixins-all.pcss";

.MainView{
	flex: 1;
	display: grid;
	grid-template-columns: 15rem auto;
	grid-template-rows: 4rem auto 1.5rem;	
	
	& > header{
		grid-area: 1 / 1 / 2 / 3;
		background: var(--clr-scnd);
		display: grid;
		grid-template-columns: 4rem 24rem auto 14rem 1rem;
		z-index: 100;
		
		& > h3 {
			@mixin typo-h5{};
			
			grid-column: 2;
			align-self: center;
			justify-self: left;
			color: #fff;
		}
	}

	& > main{
		grid-area: 2 / 2 / 3 / 3;
		display: flex;
		flex-direction: column;
		background: #f0f0f0;
		overflow: hidden;
		& > * {
			flex: 1;
		}
	}


	& > nav{
		grid-area: 2 / 1 / 4 / 2;
		background-color: var(--bkg-nav);
		display: flex;
		overflow: hidden;
	}


	& > footer{
		grid-area: 3 / 2 / 4 / 3;
		color: #aaa;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		padding-right: 64px;
	}

}